<template>
  <el-container style="margin: 20px 40px;background: #fff;width:1200px;margin:20px auto">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)" class="containerLive">
      <el-menu @select="handleOpen" :default-active="footerIndex">
        <div class="tits">
          <img :src="upfacePath" v-if="upfacePath" alt />
          <img src="../../../static/img/boy.png" v-else alt />
          <div>{{upAccount}}</div>
        </div>
        <el-menu-item-group>
          <el-menu-item index="/setting/myshop">铺源列表</el-menu-item>
          <el-menu-item index="/setting/myneed">需求列表</el-menu-item>
          <el-menu-item index="/setting/myinfo">个人资料</el-menu-item>
          <el-menu-item index="/setting/mycollect">我的收藏</el-menu-item>
          <el-menu-item index="/setting/myhistory">浏览历史</el-menu-item>
          <el-menu-item index="/setting/myidea">意见反馈</el-menu-item>
          <el-menu-item index="">退出登录</el-menu-item>
        </el-menu-item-group>
      </el-menu>
    </el-aside>

    <el-container>
      <el-main class="el-main">
        <router-view />
      </el-main>
    </el-container>
    <el-dialog title="退出登录" :visible.sync="centerDialogVisible" width="400px" center>
      <span>退出登录后将无法发布商铺信息，您确定退出登录吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false" class="quxiao">取 消</el-button>
        <el-button type="primary" @click="quitSure" class="queding">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      centerDialogVisible: false
    };
  },
  computed: {
    upfacePath() {
      return this.$store.state.userInfo.facePath;
    },
    upAccount() {
      return this.$store.state.userInfo.account;
    },
    footerIndex() {
      return this.$store.state.footerIndex;
    }
  },
  created() {},
  mounted() {
    this.$store.state.footerIndex = "/" + this.$route.name;
  },
  methods: {
    quitSure() {
      this.$set(this.$store.state, "loginBtn", true);
      sessionStorage.removeItem("userId");
      sessionStorage.removeItem("nick");
      sessionStorage.removeItem("facePath");
      sessionStorage.removeItem("account");
      sessionStorage.setItem('isLogin', false)
      let userData = {};
      this.$store.commit("upUserInfo", userData);
      this.$router.push("/home");
      this.$store.state.activeIndex = "/home";
    },
    handleOpen(key) {
      if (key == "") {
        this.centerDialogVisible = true;
      } else {
        this.$router.push(key);
      }
    }
  }
};
</script>
<style scoped lang="less">
.queding {
  background: #e41e24;
  color: #fff;
  border: 1px solid #e41e24;
  width: 30%;
}
.quxiao {
  background: #999;
  color: #fff;
  border: 1px solid #999;
  width: 30%;
}
.tits {
  img {
    width: 60px;
    height: 60px;
    border-radius: 60px;
    border: 1px solid #ea2000;
    display: block;
    margin: 10px auto;
  }
  font-size: 18px;
  padding: 20px 0;
}
.el-menu-item {
  font-size: 16px;
}
</style>
